<template>
  <el-drawer title="预览"
             v-model="previewVisible"
             size="60%"
             append-to-body
             :before-close="handleBeforeClose"
             destroy-on-close>
    <avue-form v-if="previewVisible&&formOption"
               ref="form"
               class="preview-form"
               :option="formOption"
               v-model="formModel"
               @submit="handlePreviewSubmit"></avue-form>
    <div class="drawer-foot">
      <el-button size="default"
                 type="primary"
                 @click="$refs.form.submit()">确定
      </el-button>
      <el-button size="default"
                 type="danger"
                 @click="handleBeforeClose()">取消
      </el-button>
    </div>
  </el-drawer>
</template>

<script>
import designTools from "components/form-design/utils/designTools";
import {deepClone} from "utils/util";

export default {
  name: "formPreview",
  data() {
    return {
      previewVisible: false,
      formOption: null,
      formModel: {},
    }
  },
  methods: {
    show(formOption) {
      formOption = deepClone(formOption || {});
      if (!formOption.column || formOption.column.length < 1) {
        this.$message.error("没有需要展示的内容")
        return
      }
      formOption = designTools.designOptionToAvueOption(formOption)
      console.log("formOption", formOption)
      this.formOption = formOption;
      this.previewVisible = true;
    },
    handlePreviewSubmit(form, done) {
      if (done) {
        this.$alert(this.formModel).then(() => {
          done()
        }).catch(() => {
          done()
        })
      } else {
        this.$refs.form.validate((valid, done) => {
          if (valid) this.$alert(this.formModel).then(() => {
            done()
          }).catch(() => {
            done()
          })
        })
      }
    },
    handleBeforeClose() {

      this.formOption = null;
      this.previewVisible = false;
    }
  }
}
</script>

<style scoped>

</style>
